<template>
   <a-modal :visible="props.show" class="ckd-dialog" width="856px" :on-before-cancel="close">
    <template #title>
      <div class="ckd-dialog-title w-full h-[56px] flex justify-between items-center">添加权限</div>
    </template>
    <div class="pop-content-box w-full h-auto overflow-hidden box-border">
      <!-- 内容 - 开始 -->
       <div class="role-name-box w-full h-[48px] box-border overflow-hidden">
        <a-form-item label="角色名称">
          <a-input :key="props.show ? 1 : 2" v-model='rolename' placeholder="请输入" class="w-[268px_!important]" :disabled="true"></a-input>
        </a-form-item> 
       </div>
       <div class="bottom-box w-full h-[420px] overflow-hidden box-border flex justify-between items-center">
        <div class="item-box w-[calc(50%_-_8px)] h-full overflow-hidden box-border">
          <div class="title">
            <span>菜单与功能权限</span>
            <span></span>
          </div>
          <div class="content">
            <menuBox v-if="props.show" :account="`-1`" :service-name="props.serviceName" @checked="handlerMenusChecked" />
          </div>
        </div>
        <div class="item-box w-[calc(50%_-_8px)] h-full overflow-hidden box-border">
          <div class="title">
            <span>数据权限（组织维度）</span>
            <span></span>
          </div>
          <div class="content">
            <orgBox v-if="props.show" :account="`-1`" @checked="handlerOrgsChecked" />
          </div>
        </div>
       </div>
      <!-- 内容 - 结束 -->
    </div>
    <template #footer>
      <a-button @click="close">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>>
</template>

<script lang="ts" setup>
import { computed, watch, ref, onMounted, nextTick, type PropType } from 'vue';
import * as Api from '@/api/user/useManagement';
import * as T from '@/api/user/userManagement_type';
import menuBox from './menuTreeBox.vue'
import orgBox from './orgTreeBox.vue'
import {Message} from '@arco-design/web-vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  account: {
    type: String,
    default: ''
  },
  serviceName: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['close', 'save', 'submit'])

// const roleId = ref()
const roleId = computed(() => {
  if (props.show) {
    return Math.floor(Math.random() * 1e10)
  }
  return Math.floor(Math.random() * 1e10)
})
const rolename = computed(() => {
  if (props.show) {
    return '临时角色' + Math.floor(Math.random() * 1e10)
  }
  return '临时角色' + Math.floor(Math.random() * 1e10)
})
// const rolename = ref(`临时角色${roleId.value}`)
const roles = ref<any[]>([])
const orgs = ref<any[]>([])
const menus = ref<any[]>([])

function handlerMenusChecked(ids: number[]) {
  menus.value = ids
}
function handlerOrgsChecked(ids: number[]) {
  orgs.value = ids
}

function roleBindUser(roleId: any, account: string) {
  Api.userBindRoles(props.account, [roleId]).then(res => {
    const {code, data, message} = res as any
    if (code === 200) {
      emits('save')
      close()
    } else {
      Message.error(message)
    }
  }).catch(e => {
    const {code, message} = e
    if (code == 400) {
      Message.error(message)
    }
  })

}

function findNewRole() {
  Api.getRoleList({
    page: 1, page_size: 1e2
  }, rolename.value).then(res => {
    const {code, data, message} = res as any
    if (code === 200 && data) {
      if (data.length) {
        const {id, role_name} = data[0]
        if (!id || role_name !== rolename.value) {
          Message.error('角色不存在')
          return
        }
        roleBindUser(id, props.account) // 绑定角色至用户
      
      } else {
        // addRole()
      }
    } else {
      Message.error(message)
    }
  }).catch(e => {
    const {code, message} = e
    if (code == 400) {
      Message.error(message)
    }
  })
}

function addTempPowers() {
  Api.userTempAuths(
    props.account, 
    menus.value ? menus.value : [],
    orgs.value ? orgs.value : [],
    rolename.value
  ).then(rs => {
    const {code, data, message} = rs as any
    if (code === 200) {
          // emits('save')
          // close()
          findNewRole()
        } else {
          Message.error(message)
        }
  }).catch(e => {
    const {code, message} = e
    if (code == 400) {
      Message.error(message)
    }
  })
}

function submit() {
  if (!roleId.value) {
    Message.error('请选择角色')
    return
  }
  addTempPowers()
}

watch(() => props.show, (val) => {
  orgs.value = []
  menus.value = []
})


function close() {
  emits('close')
  return false
}
</script>


<style lang="less" scoped>
.content-box{
  .arco-form{
    :deep(.arco-form-item-content) {
      box-sizing: border-box; padding-right: 200px;
    }
  }
}
.bottom-box{
  .item-box{
    border-radius: 8px; opacity: 1; border: 1px solid #EBF0FA;
    .title{
      width: 100%; height: 40px; overflow: hidden; box-sizing: border-box; background: #F7F9FC;
      display: flex; justify-content: flex-start; align-items: center; padding: 0 12px;
      font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394D73;
    }
    .content{
      @apply w-full overflow-hidden overflow-y-auto box-border;
      height: calc(100% - 40px); padding: 12px 24px;
    }
  }
}
</style>

<style lang="less">
.ckd-dialog-title{
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  color: #394D73;
}
.ckd-dialog{
  .arco-modal-wrapper{
    .arco-modal{
      .arco-modal-header{
        border-bottom: 0!important;
      }
      .arco-modal-footer{
        border-top: 0!important;
      }
    }
  }
}
</style>
